<template>
  <el-drawer v-bind="$attrs" title="病例信息" :visible.sync="value" direction="btt" custom-class="eldrawer">
    <div class="infoBox">
      <dl>
        <dt>患者</dt>
        <dd>{{patientInfo.name}}</dd>
      </dl>
      <dl>
        <dt>性别</dt>
        <dd>{{patientInfo.sex}}</dd>
      </dl>
      <dl>
        <dt>年龄</dt>
        <dd>{{patientInfo.age}}</dd>
      </dl>
      <!-- <dl>
        <dt>医院科室</dt>
        <dd></dd>
      </dl>
      <dl>
        <dt>影像类型</dt>
        <dd></dd>
      </dl>
      <dl>
        <dt>重建组织</dt>
        <dd></dd>
      </dl> -->
      <dl>
        <dt>病情概况</dt>
        <dd>{{patientInfo.feature}}</dd>
      </dl>
    </div>
  </el-drawer>
</template>

<script>

export default {
  components: {
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    patientInfo: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
    }
  },
  computed:{
  },
  created() {
  },
  mounted() {
  },
  methods:{
  }
}
</script>

<style scoped lang="less">
.infoBox {
  height: 100%;
  overflow-y: auto;
  dl {
    margin: 0;
    display: flex;
    border-bottom: 1px solid #F2F1F5;
    &:last-child {
      border-bottom: none;
    }
    dt {
      width: 5em;
      padding: 10px 0 10px 1em;
      color: #666;
    }
    dd {
      flex: 1;
      padding: 10px 0;
      color: #222;
    }
  }
}
</style>
<style lang="less">
.eldrawer {

  .el-drawer__header {
    padding: 10px 10px;
    margin-bottom: 0px;
    font-size: 16px;
    border-bottom: 1px solid #F2F1F5;
  }
  .el-drawer__body {
    font-size: 14px;
    overflow-y: auto;
  }
}
</style>